<template>
    <div class="diary-item">
        <yk-space dir="vertical">
            <div class="diary-item_top">
                <yk-space dir="vertical" :size="4">
                    <div class="diary-item_title">
                        <p  v-html="title">
                        </p>
                        <img :src="weatherUrl" />
                    </div>
                    <yk-text type="third">{{ props.diaryData?.created_at ? getTime(new Date(props.diaryData.created_at))
                        : '' }}</yk-text>
                </yk-space>

                <yk-popconfirm trigger="click" title="删除" content="删除将不可恢复" @cancel="cancel" @confirm="deleteDiary()">
                    <IconDeleteOutline class="diary-item_delete" />
                </yk-popconfirm>
            </div>
            <yk-text v-html="content"></yk-text>
            <div class="diary-item_picturue">
                <yk-image-preview-group :src-list="pictures" width="80" height="80"
                    fit="cover"></yk-image-preview-group>
            </div>
        </yk-space>
    </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, computed, watch, onMounted } from 'vue';
import type { diaryData } from '../../utils/interface';
import { getTimeYMDHMS, getTime } from '../../utils/time'; // 导入格式化时间的函数
import { weather } from '../../utils/weather'; // 导入天气数据
import { baseImgPath } from '../../utils/env'; // 导入图片路径
import { highlightKeyword } from '../../utils/searchHighlight';

const proxy: any = getCurrentInstance()?.proxy
function cancel() {
    proxy.$message({ type: 'warning', message: '你点击了取消按钮' })
}

const emits = defineEmits(['delete'])

type diaryItemProps = {
    diaryData: diaryData; // 文章数据
    searchTerm: string;
}
const props = withDefaults(defineProps<diaryItemProps>(), {
    diaryData: () => ({
        id: 0,
        title: '',
        created_at: getTimeYMDHMS(new Date()),
        content: '',
        weather_id: 0,
        picture: '',
    }),
    searchTerm: '',
})// 文章数据默认值

//获取天气url
const weatherUrl = computed(() => {
    return weather[props.diaryData.weather_id].icon
})


// 删除文章
const deleteDiary = () => {
    emits('delete', props.diaryData!.id)
    // 在这里实现删除文章的逻辑，例如调用 API 或更新状态
}

//图片处理
const pictures = computed(() => {
    if (props.diaryData?.picture) {
        let arr: Array<string> = []
        let picture = JSON.parse(props.diaryData?.picture)
        for (let i = 0; i < picture.length; i++) {
            arr.push(`${baseImgPath}/${picture[i].url}`); // 假设 coverUrl 是文章数据中的字段
        }
        return arr;
    }
    return [];
})

// 高亮关键词
const title = ref('')
const content = ref('')
const highlightText = (key?: string) => {
    if (props.diaryData?.content) {
        content.value = highlightKeyword(props.diaryData?.content, key);
    }
    // 标题的类型可为undefined
    title.value = highlightKeyword(props.diaryData?.title, key);
};

watch(() => props.searchTerm, () => {
    highlightText(props.searchTerm);
})

onMounted(() => {
    highlightText(props.searchTerm);
})

</script>
<style scoped lang="less">
.diary-item {
    border-radius: @radius-m;
    padding: @space-xl;
    background: @bg-color-l;
    width: 100%;

    &_top {
        display: flex;
        justify-content: space-between;

        width: 100%;
    }

    &_title {
        display: flex;
        font-size: 20px;
        align-items: center;
        font-weight: 600;

        img {
            width: 20px;
            height: 20px;
            margin-left: @space-s;
        }
    }

    &_delete {
        width: 20px;
        height: 20px;
        padding: 2px;
        color: @font-color-s;
        transition: color @animatb;
        cursor: pointer;
        display: none;

        &:hover {
            color: @font-color-l;
        }
    }

    .diary-item_picturue {
        :deep(.yk-space) {
            gap: 8px;
        }

        :deep(.yk-image) {
            border-radius: 8px;
        }
    }

    &:hover {
        .diary-item_delete {
            display: block;
        }
    }
}
</style>
